<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Location 测试页面</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    	var xmlHttp = false;
    	var longitudes;
    	var latitudes;
    	function createXMLHttpRequest(){
    		if(window.ActiveXObject){
    			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}
    		else if(window.XMLHttpRequest){
    			xmlHttp = new XMLHttpRequest();
    		}
    	}
    	function handleStateChange(){
    		if(xmlHttp.readyState == 4){				//  请求完成
    			if(xmlHttp.status == 200){				//  成功得到请求内容
    				// 解析返回的信息
    				var results = xmlHttp.responseXML;
    				var city = document.getElementById("city");
    				// 清除城市
    				while(city.length > 0){
    					city.remove(0);
    				}
    				// 得到所有的 location 元素
    				var locations = results.getElementByTagName("location");
    				var count = locations.length;
    				longitudes = new Array(count);
    				latitudes = new  Array(count);
    				var location;
    				for(var i=0;i<count;i++){
    					location = location[i];
    					city.appendChild(createOption(getElementText(location,"name")));
    					longitudes[i] = getElementText(location,"longitude");
    					latitudes[i] = getElementText(location,"latitude");
    				}
    				changeLocation();
    			}
    			else{
    				document.getElementById("status").innerHTML = "<font color='red'>status:"+xmlHttp.status+"<br>"
    				+xmlHttp.statusText+"</font>";
    				}
    			}
    		}
    	function changeProvince(){
    		var province = document.getElementById("province").value;
    		if(province == ""){
    			alert("请选择一个省份");
    			return;
    		}
    		createXMLHttpRequest();
    		xmlHttp.onreadystatechange = handleStateChange;
    		// 为了正确编码中文省份名，使用 POST 发送请求而不用 GET
    		xmlHttp.open("POST","location",true);
    		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		xmlHttp.send("province="+province);
    		
    	}
    	// 根据选择的城市改变经纬度
    	functin chanceLocation(){
    		var index = document.getElementById("city").selectedIndex;
    		document.getElementById("longitude").value = longitudes[index];
    		document.getElementById("latitude").value = latitudes[index];
    	}
    	// 利用 DOM 创建一个指定值的 OPTION 元素
    	function createOption(){
    		var option = document.createElement("option");
    		var textNode = document.createTextNode(text);
    		option.setAttribute("value",text);
    		option.appendChild(textNode);
    		return option;
    	}
    	// 得到 PARENT 元素指定名称 NAME 的子节点值
    	function getElementText(parent,name){
    		return parent.getElementsByTagName(name)[0].firstChild.nodeValue;
    	}
    		
    </script>
  </head>
  
  <body>
    	<form action="location" method="post">
    	省份:<select id="province" name="province" onchange="changeProvince()">
    		<option value="">-请选择-</option>
    		<option value="北京市">北京</option>
    		<option value="安徽省">安徽</option>
    		<option value="重庆市">重庆市</option>
    		<option value="福建省">福建省</option>
    		<option value="甘肃省">甘肃省</option>
    		<option value="广东省">广东省</option>
    		<option value="广西壮族自治区">广西壮族自治区</option>
    		<option value="贵州省">贵州省</option>
    		<option value="海南省">海南省</option>
    	</select>
    	城市：<select name="city" id="city" onchange="changeLocation()">    		
    	</select>
    	<br>
    	经度：<input type="text" name="longitude" id="longitude" size="10">
    	纬度：<input type="text" name="latitude" id="latitude" size="10">
    	<input type="submit" value="查询">
    </form>
    <div id="status">    
    </div>
  </body>
</html>
